<template>
  <div class="index">
    <div class="index_header">
      <el-date-picker v-model="selsectdata" type="month" placeholder="选择月">
      </el-date-picker>
      <div class="time">
        {{ currentTime }}
      </div>
    </div>
    <div class="index-box">
      <div class="box1">
        <p>应发薪资</p>
        <h2>573,578.00</h2>
        <p class="p">
          较上月<span>+12.05%↑</span>&nbsp;&nbsp;&nbsp;&nbsp;同比<span
            >-10.15%↓</span
          >
        </p>
      </div>
      <div class="box2">
        <p>实发薪资</p>
        <h2>553,578.00</h2>
        <p class="p">
          较上月<span>+12.05%↑</span>&nbsp;&nbsp;&nbsp;&nbsp;同比<span
            >-10.15%↓</span
          >
        </p>
      </div>
      <div class="box3">
        <p>计薪人数</p>
        <h2>45</h2>
        <p class="p">
          较上月<span>+12.05%↑</span>&nbsp;&nbsp;&nbsp;&nbsp;同比<span
            >-10.15%↓</span
          >
        </p>
      </div>
      <div class="box4">
        <p>人力成本</p>
        <h2>573,578.00</h2>
        <p class="p">
          较上月<span>+12.05%↑</span>&nbsp;&nbsp;&nbsp;&nbsp;同比<span
            >-10.15%↓</span
          >
        </p>
      </div>
    </div>
    <div class="middle">
      <div class="calendar">
        <el-calendar v-model="datavalue">
          <template slot="dateCell" slot-scope="{ date }">
            <div class="date-content">
              <span v-if="isWeek(date)" class="rest">休</span>
              <span v-else>{{ getDay(date) }}</span>
              <div>{{ changeNumToHan(getDay(date)) }}</div>
            </div>
          </template>
        </el-calendar>
      </div>
      <div class="right">
        <div class="message">
          <div class="header-message">
            <h1>{{ getDay(new Date()) }}</h1>
            <div class="date">
              <p>{{ nowWeek }}</p>
              <p>  {{ currentDate }}</p>
            </div>
          </div>
          <p class="font-text">
            我们应该担心的不是衰老，而是生锈的人生，我们的目标不是拥有一切，而是能够充实地生活。
          </p>
        </div>
        <div class="icon">
          <h1>快速入口</h1>
          <div class="icons">
            <div class="iconss">
              <router-link :to="{ name: 'staff' }"
                ><i class="el-icon-s-order"></i
              ></router-link>
              <div>人事管理</div>
            </div>
            <div class="iconss">
              <router-link :to="{ name: 'paypaper' }">
                <i class="el-icon-s-order"></i
              ></router-link>

              <div>人员工资</div>
            </div>
            <div class="iconss">
              <router-link :to="{ name: 'payxiangmu' }">
                <i class="el-icon-s-order"></i
              ></router-link>
              <div>薪资项目</div>
            </div>
          </div>
          <div class="icons">
            <div class="iconss">
              <router-link :to="{ name: 'payxiangmu' }">
                <i class="el-icon-s-order"></i
              ></router-link>
              <div>薪资核算</div>
            </div>
            <div class="iconss">
              <router-link :to="{ name: 'grant' }">
                <i class="el-icon-s-order"></i>
              </router-link>

              <div>工资发放</div>
            </div>
            <div class="iconss">
              <router-link :to="{ name: 'payfangan' }">
                <i class="el-icon-s-order"></i>
              </router-link>
              <div>薪资方案</div>
            </div>
          </div>
          <div class="icons">
            <div class="iconss">
              <router-link :to="{ name: 'paytaizhang' }">
                <i class="el-icon-s-order"></i>
              </router-link>
              <div>薪资台账</div>
            </div>
            <div class="iconss">
              <router-link :to="{ name: 'soseplan' }">
                <i class="el-icon-s-order"></i
              ></router-link>
              <div>社保方案</div>
            </div>
            <div class="iconss">
              <router-link :to="{ name: 'profundplan' }">
                <i class="el-icon-s-order"></i
              ></router-link>

              <div>积金方案</div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 创建一个容器来挂载要渲染的图标 -->
    <div class="echart">
      <div class="font">
        <h3>薪资统计</h3>
      </div>
      <div id="main"></div>
    </div>
    <div class="total">
      <div class="total-one">
        <p>社保总费用</p>
        <h2>
          573,578.00 <span style="font-size: 14px; font-weight: normal">↓</span>
        </h2>
        <p>较上月<span>-1,235.00 ↓</span></p>
      </div>
      <div class="total-two">
        <p>公积金总费用</p>
        <h2>
          573,578.00 <span style="font-size: 14px; font-weight: normal">↑</span>
        </h2>
        <p>较上月<span>+1,234.00 ↑</span></p>
      </div>
      <div class="total-three">
        <p>参保人数</p>
        <h2>45 <span style="font-size: 14px; font-weight: normal">↑</span></h2>
        <p>较上月<span>+3人 ↑</span></p>
      </div>
      <div class="total-four">
        <p>总费用</p>
        <h2>
          1,273,578.00
          <span style="font-size: 14px; font-weight: normal">↑</span>
        </h2>
        <p>较上月<span>-1,235.00 ↑</span></p>
      </div>
    </div>

    <!-- 第而部分图表 -->
    <div class="echart-two">
      <div id="main2"></div>
    </div>
  </div>
</template>

<script>
// 引入echarts
import * as echarts from "echarts";

export default {
  data() {
    return {
      timer: null,
      nowWeek: "",
      nowDate: "",
      nowTime: "",
      activeName: "second",
      selsectdata: "",
      datavalue: new Date(), //日历值  没有的话  显示当前月份
      // 获取最新的时间
      timer: "", //定义一个定时器的变量
      currentTime:
        new Date().getFullYear() +
        "-" +
        new Date().getMonth() +
        1 +
        "-" +
        new Date().getDate() +
        " " +
        new Date().getHours() +
        ":" +
        new Date().getMinutes() +
        ":" +
        new Date().getSeconds(), // 获取当前时间


        currentDate:
        new Date().getFullYear() +
        "-" +
        new Date().getMonth() +
        1 +
        "-" +
        new Date().getDate() 
    };
  },
  created() {
    this.timer = setInterval(() => {
      var y = new Date().getFullYear();
      var m = this.appendZero(new Date().getMonth() + 1);
      var d = this.appendZero(new Date().getDate());
      var ho = this.appendZero(new Date().getHours());
      var mi = this.appendZero(new Date().getMinutes());
      var se = this.appendZero(new Date().getSeconds());
      //修改数据date
      this.currentTime = y + "-" + m + "-" + d + " " + ho + ":" + mi + ":" + se;
    }, 1000);
  },
  mounted() {
    (this.timer = setInterval(() => {
      this.setNowTimes();
    }, 1000)),
      this.appendZero(); //调用函数
    this.selsectdata = "2023-05";
    // 第一个图表
    let myChart = echarts.init(document.getElementById("main"));
    let myChart2 = echarts.init(document.getElementById("main2"));
    myChart.setOption({
      legend: {},
      tooltip: {},
      dataset: {
        dimensions: ["product", "应发工资", "实发工资"],
        source: [
          { product: "项目部", 应发工资: 43.3, 实发工资: 85.8 },
          { product: "财务部", 应发工资: 83.1, 实发工资: 73.4 },
          { product: "人事部", 应发工资: 86.4, 实发工资: 65.2 },
          { product: "技术部", 应发工资: 72.4, 实发工资: 53.9 },
          { product: "设计部", 应发工资: 72.4, 实发工资: 53.9 },
          { product: "产品部", 应发工资: 72.4, 实发工资: 53.9 },
          { product: "行政部", 应发工资: 72.4, 实发工资: 53.9 },
        ],
      },
      xAxis: { type: "category" },
      yAxis: {},
      series: [{ type: "bar" }, { type: "bar" }],
    });
    // 第二个图表
    myChart2.setOption({
      tooltip: {
        trigger: "axis",
        axisPointer: {
          type: "cross",
          crossStyle: {
            color: "#999",
          },
        },
      },
      toolbox: {
        feature: {
          dataView: { show: true, readOnly: false },
          magicType: { show: true, type: ["line", "bar"] },
          restore: { show: true },
          saveAsImage: { show: true },
        },
      },
      legend: {
        data: ["社保个人", "社保企业", "参保人数"],
      },
      xAxis: [
        {
          type: "category",
          // data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
          data: [
            "项目部",
            "财务部",
            "人事部",
            "技术部",
            "设计部",
            "产品部",
            "行政部",
          ],
          axisPointer: {
            type: "shadow",
          },
        },
      ],
      yAxis: [
        {
          type: "value",
          name: "单位(元)",
          min: 0,
          max: 800000,
          interval: 100000,
          axisLabel: {
            formatter: "{value}",
          },
        },
        {
          type: "value",
          name: "单位(人)",
          min: 0,
          max: 60,
          interval: 10,
          axisLabel: {
            formatter: "{value}",
          },
        },
      ],
      series: [
        {
          name: "社保个人",
          type: "bar",
          tooltip: {
            valueFormatter: function (value) {
              return value;
            },
          },
          data: [
            200000, 500000, 700000, 300000, 250000, 760000, 135600, 162200,
            326000, 200000, 640000, 330000,
          ],
        },
        {
          name: "社保企业",
          type: "bar",
          tooltip: {
            valueFormatter: function (value) {
              return value;
            },
          },
          data: [2, 5, 9, 26, 28, 50, 13, 18, 48, 18, 60, 23],
        },
        {
          name: "参保人数",
          type: "line",
          yAxisIndex: 1,
          tooltip: {
            valueFormatter: function (value) {
              return value;
            },
          },
          data: [2, 5, 9, 26, 28, 50, 13, 18, 48, 18, 60, 23],
        },
      ],
    });
  },
  methods: {
    setNowTimes() {
      //获取当前时间
      let myDate = new Date();
      let wk = myDate.getDay();
      let yy = String(myDate.getFullYear());
      let mm = myDate.getMonth() + 1;
      let dd = String(
        myDate.getDate() < 10 ? "0" + myDate.getDate() : myDate.getDate()
      );
      let hou = String(
        myDate.getHours() < 10 ? "0" + myDate.getHours() : myDate.getHours()
      );
      let min = String(
        myDate.getMinutes() < 10
          ? "0" + myDate.getMinutes()
          : myDate.getMinutes()
      );
      let sec = String(
        myDate.getSeconds() < 10
          ? "0" + myDate.getSeconds()
          : myDate.getSeconds()
      );
      let weeks = [
        "星期日",
        "星期一",
        "星期二",
        "星期三",
        "星期四",
        "星期五",
        "星期六",
      ];
      let week = weeks[wk];
      this.nowDate = yy + "-" + mm + "-" + dd;
      this.nowTime = hou + ":" + min + ":" + sec;
      this.nowWeek = week;
    },
    handleClick(tab, event) {
      console.log(tab, event);
    },
    // 日历
    getDay(data) {
      return data.getDate();
    },
    //判度是否是周六
    isWeek(date) {
      return date.getDay() === 6 || date.getDay() === 0;
    },
    //时间过滤加0
    appendZero(obj) {
      if (obj < 10) {
        return "0" + obj;
      } else {
        return obj;
      }
    },
    changeMonth(value) {
      this.datavalue = value;
    },

    // 将数字1转成一
    changeNumToHan(num) {
      var arr1 = new Array(
        "零",
        "一",
        "二",
        "三",
        "四",
        "五",
        "六",
        "七",
        "八",
        "九"
      );
      var arr2 = new Array(
        "",
        "十",
        "百",
        "千",
        "万",
        "十",
        "百",
        "千",
        "亿",
        "十",
        "百",
        "千",
        "万",
        "十",
        "百",
        "千",
        "亿"
      ); //可继续追加更高位转换值
      if (!num || isNaN(num)) {
        return "零";
      }
      var english = num.toString().split("");
      var result = "";
      for (var i = 0; i < english.length; i++) {
        var des_i = english.length - 1 - i; //倒序排列设值
        result = arr2[i] + result;
        var arr1_index = english[des_i];
        result = arr1[arr1_index] + result;
      }
      //将【零千、零百】换成【零】 【十零】换成【十】
      result = result.replace(/零(千|百|十)/g, "零").replace(/十零/g, "十");
      //合并中间多个零为一个零
      result = result.replace(/零+/g, "零");
      //将【零亿】换成【亿】【零万】换成【万】
      result = result.replace(/零亿/g, "亿").replace(/零万/g, "万");
      //将【亿万】换成【亿】
      result = result.replace(/亿万/g, "亿");
      //移除末尾的零
      result = result.replace(/零+$/, "");
      //将【零一十】换成【零十】
      //result = result.replace(/零一十/g, '零十');//貌似正规读法是零一十
      //将【一十】换成【十】
      result = result.replace(/^一十/g, "十");
      //将单数日变为初几
      result = result.length === 1 ? `初${result}` : result;
      return result;
    },
  },
  beforeDestroy() {
    if (this.timer) {
      clearInterval(this.timer); // 在Vue实例销毁前，清除我们的定时器
    }
  },
  Destroy() {
    this.datavalue = "";
  },
};
</script>

<style lang="less" scoped>
* {
  padding: 0;
  margin: 0;
}

.index {
  height: 100%;
  width: 100%;
  background: #f5f7f9;
}

.index_header {
  line-height: 50px;
  justify-content: space-between;
  display: flex;
  width: 90%;
}

.index-box {
  width: 90%;
  display: flex;
  justify-content: space-between;
}

.index-box div {
  padding: 15px;
  background: #ffff;
  height: 120px;
  width: 22%;
  margin-top: 18px;
  /* margin: 10px; */
  border-radius: 18px;
}

.index-box div p:nth-child(1) {
  color: #929292;
}

.index-box span:nth-child(1) {
  color: red;
}

.index-box span:nth-child(2) {
  color: green;
}

.index-box .p {
  margin-top: 25px;
}

.middle {
  width: 90%;
  display: flex;
  justify-content: space-between;
  margin-top: 20px;
}

.middle .calendar {
  width: 75%;
}

.middle .calendar .date-content {
  display: flex;
  justify-content: space-around;
  flex-direction: column;
  align-items: center;
  height: 70px;
}

.middle .calendar .date-content .rest {
  color: black;
  border-radius: 50%;
  background: rgb(250, 124, 77);
  width: 20px;
  height: 20px;
  line-height: 20px;
  display: inline-block;
  font-size: 12px;
  margin-left: 10px;
  text-align: center;
}

.middle .calendar .date-content .text {
  // text-align: center;
  margin-left: 45px;
}

.right {
  width: 23%;
}

.right .message {
  padding: 10px;
  border-radius: 10px;
  height: 200px;
  background: #ffff;
}

.right .message .header-message h1 {
  font-size: 40px;
}

.right .message .header-message {
  display: flex;
}

.right .message .header-message .date {
  padding: 3px 12px;
  color: #657180;
}

.right .message .font-text {
  margin-top: 10px;
  letter-spacing: 3px;
  color: #657180;
  line-height: 35px;
}

.right .icon {
  border-radius: 10px;
  height: 400px;
  background: #ffff;
  margin-top: 20px;
  padding: 10px;
}

.right .icons {
  display: flex;
}

.right .icons i {
  font-size: 40px;
  color: #5d7092;
  margin: 20px;
  color: #5d7092;
}

.right .iconss div {
  margin-left: 10px;
  color: #5d7092;
}

/* echarts图表样式 */
.echart {
  margin-top: 35px;
}

.echart .font {
  width: 90%;
  /* height: 65px; */
  line-height: 45px;
  background: #f9f9f9;
}

.echart h3 {
  padding: 10px 10px;
}

.echart #main {
  background: #fff;
  margin-top: 2px;
  width: 90%;
  height: 500px;
}
.echart-two {
  width: 100%;
  height: 800px;
}
.echart-two #main2 {
  background: #fff;
  margin-top: 2px;
  width: 100% !important;
  height: 420px;
}

.echart-two #main3 {
  background: #fff;
  margin-top: 2px;
  width: 100%;
  height: 420px;
}
.total {
  margin-top: 20px;
  width: 90%;
  height: 180px;
  background: #fff;
  display: flex;
}

.total div {
  margin: 40px 30px;
  width: 25%;
}

.total .total-one {
  display: flex;
  justify-content: space-between;
  height: 85px;
  flex-direction: column;
}

.total .total-two {
  display: flex;
  justify-content: space-between;
  height: 85px;
  flex-direction: column;
}
.total .total-three {
  display: flex;
  justify-content: space-between;
  height: 85px;
  flex-direction: column;
}
.total .total-four {
  display: flex;
  justify-content: space-between;
  height: 85px;
  flex-direction: column;
}
.total div p:nth-child(1) {
  font-size: 14px;
  color: #929292;
}

.total .total-one span {
  color: green;
}

.total .total-two span {
  color: red;
}

.total .total-three span {
  color: red;
}

.total .total-four span {
  color: red;
}

.echart-two {
  padding: 10px 10px;
  margin-top: 15px;
  background: #ffff;
  width: 90%;
  height: 500px;
  //   margin-left: 18px;
  color: #5d7092;
  box-sizing: border-box;
}
</style>

